<template>
  <div class="web-class-list">
    <breadcrumb :navdata="bdname"></breadcrumb>
    <!-- <h2 class='title-notic'>
      <img src="/static/h5img/not.png" class="title-img" alt="" srcset="">如果发现班级与实际情况不符，那麻烦确认下是不是城市定位错误了呢？
    </h2> -->
    <div class="list-tab">
      <div class="list-tab-child" :class="{'active':listTabActive==1}" @click="toggleList(1)">试听课</div>
      <div class="list-tab-child" :class="{'active':listTabActive==2}" @click="toggleList(2)">正式课</div>
    </div>
    <div class="null-img" v-if="loaded && classPlanList.length==0">
      <img src="../../../static/web_class_null.png" alt="">
      <p>暂无开班计划，请耐心等待更新</p>
    </div>
    <div class="webClassListItem">
      <web-class-list-item 
        v-for="(item,key) in classPlanList" 
        :listItem='item' 
        :itemKey='key'
        :courseType='listTabActive'
        :campusList='campusList'
        :key="key + 'classPlanList'"
        @dialog ='showDialog'

      />
    </div>
    <div class="plan-class-dialog">
      <el-dialog title="提示" ref="dialog" :show-close='true'  :visible.sync="applyDialog" class="apply-dialog">
        <p class="apply-select">是否确定报名{{dialogContent && dialogContent.course.name}}课程？</p>
        <p class="class-begin">
        {{dialogContent && (dialogContent.classPlanType == 0?'开课时间：':'上课时间：')}}<span class="time">{{dialogContent && (dialogContent.classPlanType == 0?formatTime(dialogContent.selTimeBegin):(formatTime(dialogContent.selTimeBegin, 1)+ '~' + formatTime(dialogContent.selTimeEnd,2)))}}</span>
        </p>
        <p class="class-end" v-if="dialogContent && dialogContent.classPlanType == 0">
          结课时间：<span class="time">{{dialogContent && formatTime(dialogContent.selTimeEnd)}}</span>
        </p>
        <div class="apply-btn-wrapper">
          <span class="think" @click="applyDialog = false">我再想想</span>
          <span class="signUp" @click="applyConfirm">立即报名</span>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import { Loading } from 'element-ui';
import { mapActions, mapGetters } from 'vuex'
import mixins from 'plus/mixin'
import webClassListItem from "basic/webClassPlanList/webClassListItem"
import breadcrumb from "basic/breadcrumb/breadcrumb"
import { classPlan, addToClassPlan, addToGraduClassPlan, classPlanNoLogin, cluesClassPlan} from 'api/getData';
import {formatCourseList} from 'plus/unconfirmPack'
export default {
  name:'webClassList',
  mixins: [mixins.mixinFormatTime],
  created(){
    this.initClassPlan()
  },
  data(){
    return {
      bdname: [
        {
          name: '首页',
          url: '/'
        },
        {
          name: '开班计划',
          url: '/classPlan'
        }
      ],
      classPlanList: [],
      applyDialog: false,
      curDataIndex: null,
      dialogContent: null,
      loaded:false,
      listTabActive: 1,
      campusList: [],
      listLoading: ''
    }
  },
  components: {
    breadcrumb,
    webClassListItem
  },
  computed: {
    ...mapGetters(['currentUser','isLogin'])
  },
  methods: {
    initClassPlan(){
      if(this.isLogin){
        this.getClassList()
      }else{
        this.listLoading = this.getLoading('加载中')
        classPlanNoLogin().then(res=>{
          // console.log(res)
          this.classPlanList = res.freeClassPlanList
          this.campusList = res.campusList
          this.loaded = true
          this.listLoading.close()
        })
      }
    },
    toggleList(active){
      if(this.listTabActive == active) return
      if(!this.isLogin){
        this.$alert('登录后才可以查看正式课开班计划哟~', '提示', {
          confirmButtonText: '立即登录',
          showClose: true,
          callback: action => {
            if (action == 'confirm') {
              setTimeout(() => {
                this.setDialogClose(true)
              }, 400);
            }
          }
        });
        return
      }
      this.listTabActive = active
      this.getClassList()
    },
    handelList(res){

      if(this.listTabActive == 1) this.classPlanList = formatCourseList(res.freeMapList)
      else this.classPlanList = formatCourseList(res.mapList)
      this.campusList = res.campusList
      this.loaded = true
      this.listLoading.close()
    },
    getClassList(){
        this.listLoading = this.getLoading('加载中')
        if (this.currentUser.type == '0'){
          cluesClassPlan(this.currentUser.cluesOrStuId).then(res=>{
            this.handelList(res)
          }).catch(err=>{
            this.listLoading.close()
          })
        }else{
          classPlan(this.currentUser.cluesOrStuId).then(res=>{
            this.handelList(res)
          }).catch(err=>{
            this.listLoading.close()
          })
        }
    },
    // 点击立即报名
    applyConfirm(){
      let curDataIndex = this.curDataIndex,
      curClassPlan = this.classPlanList[curDataIndex];
      let load = Loading.service({
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0)',
        target: this.$refs.dialog.$el.children[0]
      })
      if(curClassPlan.classPlanType == '1'){
        addToGraduClassPlan(curClassPlan.hcId, curClassPlan.id).then(res=>{
          this.$message({
            message: '报名成功!',
            type: 'success',
            duration: 1000
          });
          this.getClassList()
          this.applyDialog = false
          load.close()
        }).catch(msg =>{
          this.$message({
            message: '报名失败! 请重新报名!',
            type: 'warning',
          });
          load.close()
        })
      }else{
        addToClassPlan(curClassPlan.hcId, curClassPlan.id)
        .then(res =>{
          this.$message({
            message: '报名成功!',
            type: 'success',
            duration: 1000
          });
          curClassPlan.courseStatus = '1'
          this.$set(this.classPlanList,curDataIndex, curClassPlan)
          this.setFreeTime(curClassPlan)
          setTimeout(()=>{
            load.close()
            this.applyDialog = false
            this.$router.push({
              path:'/slectData',
              query:{
                id:res.historyCourse.classPlanId,
                hcId:res.historyCourse.id,
                type: this.listTabActive
              }
            })
          }, 1000)

        })
        .catch(msg =>{
          this.$message({
            message: '报名失败! 请重新报名!',
            type: 'warning',
          });
          load.close()
        })
      }
      
    },
    // 子组件触发的显示dialog
    showDialog(index){
      this.curDataIndex = index
      this.$set(this, 'dialogContent', this.classPlanList[index])
      this.$set(this, 'applyDialog', true)
    },
    ...mapActions(['setFreeTime','setDialogClose'])
  },
  watch: {
    isLogin: function (val, oldVal) {
      if(val){
        this.initClassPlan()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
 @import "~style/base"

.web-class-list
  width 1200px
  margin 0 auto

  .title-notic
    font-size $font-size-medium
    font-family SourceHanSansCN-Bold
    font-weight bold
    color $color-background

    .title-img
      width 44px
      height 44px
      margin-right 20px
      vertical-align middle
  
  .plan-class-dialog /deep/ .el-dialog
    width 438px
    border-radius 12px
    padding 40px
    @extend .borderBox

    @media (min-width: 1920px) 
      width 560px
      padding 50px

    .el-dialog__header
      padding 0
      .el-dialog__title
        font-weight bold
        font-size $font-size-large-l
        @media (min-width: 1920px) 
          font-size $font-size-large-xxl


    .el-dialog__body
      padding 0
      font-size 16px
      line-height 16px
      @media (min-width: 1920px)
        font-size 18px
        line-height 18px
      .apply-select
        margin-top 20px
        color $color-person-btn
        
      .class-begin
        margin 12px 0
        @media (min-width: 1920px)
          margin 16px 0

      .time
        color $color-person-btn
      .apply-btn-wrapper
        margin-top 40px
        text-align right
        @media (min-width: 1920px)
          margin-top 50px

        .signUp, .think 
          display inline-block
          width 116px
          height 32px
          background-color rgba(255,239,237,1)
          line-height @height
          text-align center
          color $color-person-btn
          font-size $font-size-medium
          border 1px solid $color-person-btn
          border-radius 2px
          cursor pointer
          transition all .3s
          &:hover
            background-color $color-background-more
            color #fff

          @media (min-width: 1920px)
            width 144px
            height 44px
            line-height @height
            font-size $font-size-medium-x
        
        .signUp
          margin-left 28px
          background-color $color-person-btn
          color #fff
.null-img{
  margin 0 auto
  width 138px
  height 138px
  margin-top 80px
  text-align center
  font-size 16px
  font-family MicrosoftYaHei
  font-weight 400
  color rgba(164,164,164,1)
  line-height 29px
  p{
    margin-top 30px
  }
}
.list-tab{
  font-size: 0;
  height: 58px;
  padding-bottom: 10px;
}
.list-tab-child{
  display: inline-block;
  vertical-align: top;
  width:181px;
  height:44px;
  padding-top 13px;
  background:rgba(245,245,245,1);
  font-size:18px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(118,118,118,1);
  transition: all .3s;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  &:hover{
    background:rgba(255,98,82,1);
    color:rgba(255,255,255,1);
  }
}
.list-tab .active{
  height:58px;
  background:rgba(255,98,82,1);
  font-size:18px;
  font-family:MicrosoftYaHei-Bold;
  font-weight:bold;
  color:rgba(255,255,255,1);
}
</style>

